import QtQuick 2.0

Item {
    id: root;

//    property variant operation : [
//        'source-over', 'source-in', 'source-over',
//        'source-atop', 'destination-over', 'destination-in',
//        'destination-out', 'destination-atop', 'lighter',
//        'copy', 'xor', 'qt-clear', 'qt-destination',
//        'qt-multiply', 'qt-screen', 'qt-overlay', 'qt-darken',
//        'qt-lighten', 'qt-color-dodge', 'qt-color-burn',
//        'qt-hard-light', 'qt-soft-light', 'qt-difference',
//        'qt-exclusion'
//    ]

    ListModel {
        id: operation;
        ListElement {style: "source-over"}
        ListElement {style: "source-in"}
        ListElement {style: "source-over"}
        ListElement {style: "source-atop"}
        ListElement {style: "destination-over"}
        ListElement {style: "destination-in"}
        ListElement {style: "destination-out"}
        ListElement {style: "destination-atop"}
        ListElement {style: "lighter"}
        ListElement {style: "copy"}
        ListElement {style: "xor"}
        ListElement {style: "qt-clear"}
        ListElement {style: "qt-destination"}
        ListElement {style: "qt-multiply"}
        ListElement {style: "qt-screen"}
        ListElement {style: "qt-overlay"}
        ListElement {style: "qt-darken"}
        ListElement {style: "qt-lighten"}
        ListElement {style: "qt-color-dodge"}
        ListElement {style: "qt-qt-color-burn"}
        ListElement {style: "qt-hard-light"}
        ListElement {style: "qt-soft-light"}
        ListElement {style: "qt-difference"}
        ListElement {style: "qt-exclusion"}
    }

    GridView {
        anchors.fill: parent;
        cellWidth: 240;
        cellHeight: 240;
        clip: true;

        model: operation;

        delegate: modelListDelegate;

        populate: Transition {
            NumberAnimation { properties: "x,y"; duration: 300; }
        }

        remove: Transition {
            ParallelAnimation {
                PropertyAnimation { property: "z"; to: 10000; }
                NumberAnimation { property: "scale"; to: 0; duration: 1000; }
                NumberAnimation { property: "x"; to: rectDelete.x; duration: 1000;
                    easing.type: Easing.OutInCirc; }
                NumberAnimation { property: "y"; to: rectDelete.y; duration: 1000;
                    easing.type: Easing.OutInCirc;}
            }
        }

        removeDisplaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 300; easing.type: Easing.OutCubic;}
        }

        add: Transition {
            NumberAnimation { properties: "x,y"; duration: 300; }
        }

        move: Transition {
            NumberAnimation { properties: "x,y"; duration: 300; }
        }

        moveDisplaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 300 }
        }
    }

    Component {
        id: modelListDelegate;

        Item {
            id: wrapper;
            width: 240;
            height: 240;

            TextRectangle {
                anchors.centerIn: parent;
                text.text: style;

                Canvas {
                    anchors.left: parent.left;
                    anchors.top: parent.top;
                    anchors.right: parent.right;
                    anchors.bottom: parent.text.top;
                    onPaint: {
                        var ctx = getContext("2d");


                        ctx.fillStyle = "#33a9ff";
                        ctx.fillRect(10, 10, 100, 100);

                        ctx.globalCompositeOperation = style;
                        ctx.globalAlpha = 0.75;
                        ctx.beginPath();
                        ctx.arc(110, 110, 50, 0, Math.PI*2);
                        ctx.closePath();
                        ctx.fillStyle = "#ff33a9";
                        ctx.fill();
                        ctx.restore();
                    }
                }
            }

            //close
            Rectangle {
                width: 40;
                height: 40;
                anchors.top: parent.top;
                anchors.right: parent.right;

                color: "#597dca";
                border.width: 1;
                border.color: "blue";

                MouseArea {
                    anchors.fill: parent;
                    onClicked: {
                        if(!wrapper.GridView.delayRemove)
                        {
                            operation.remove(index);
                        }
                    }
                }
            }

//            GridView.onRemove: SequentialAnimation {
//                PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true; }
//                PropertyAnimation { target: wrapper; property: "scale"; to: 0; duration: 500; easing.type: Easing.InOutElastic; }
//                PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false; }
//            }
        }
    }

    Rectangle {
        id: rectDelete;

        width: 40;
        height: 40;
        anchors.right: parent.right;
        anchors.rightMargin: 10;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 10;

        color: "red";
        border.width: 1;
        border.color: "blue";
    }

}
